<template>
    <div class="buttons">
        <div class="fx" :style="`padding-top:${options.paddingTop/2}px;padding-bottom:${options.paddingBottom/2}px;`">
            <span v-for='(item,index) in options.btnList'  :key='index' :style="`line-height:${options.lineHeight||40}px;background:${options.borderType==2 ? options.bgOrBorderColor:''};border:1px solid ${options.borderType==1 ? options.bgOrBorderColor:'none'};`">
                {{item.textContent}}
            </span>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            options:{}
        }
    },
    props:{
        option:{
            type:Object
        }
    },
    methods:{
        getText(val){
            if(!val){
                return 
            }
            let text =val.replace(/\n/g, "<br/>");
            text = text.replace(/\s/g,'&nbsp');
            this.options.textContent = text;
        },
    },
    watch:{
        option:function(val){
            this.options =JSON.parse(JSON.stringify(val));
            this.getText(this.options.textContent );

            // this.options.textContent  = this.options.textContent ? this.options.textContent.replace(/\s/g,'&nbsp') :"";
        }
    },
    mounted(){
        this.options =JSON.parse(JSON.stringify(this.option));
        this.getText(this.options.textContent );
    }
}
</script>
<style lang="less" scoped>
    .buttons{
        width:100%;
        height:auto;
        .fx{
            width:100%;
            display:flex;
            justify-content: center;
            align-items: center;
            span{
                display:inline-block;
                width:auto;
                line-height: 40px;
                background:red;
                color:#ffffff;
                border-radius:2px;
                padding:0 40px;
            }  
            span:nth-child(1){
                margin-right:20px;
            }
        }
        // line-height:100px;
    }
</style>